<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <div class="title">
      <div class="serve">
        <div class="name">商品类型搜索:</div>
        <div>
          <el-input v-model="region.className" placeholder="请输入内容"></el-input>
        </div>
      </div>
      <div class="btn">
        <el-button type="primary" icon="el-icon-search" size="medium" @click="search"
          >搜索</el-button
        >
      </div>
    </div>
    <div class="main">
      <div class="top-btn">
        <el-button type="warning" icon="el-icon-circle-plus-outline" size="medium" @click="addFn" >新建</el-button
        >
      </div>
      <div class="count">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column fixed prop="index" label="序号" width="100">
          </el-table-column>
          <el-table-column prop="className" label="工单编号" width="1300">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="150">
            <template slot-scope="scope">
              <el-button @click.native.prevent="rev(scope.$index, tableData)" type="text" size="small">
                修改
              </el-button>
              <el-button style="color: red" @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div>
      <Footer @next="next" @up="up" :number="number" :pageIndex="region.pageIndex"
      />
       <Revise :visible.sync="revise" :change ="this.change" @abst="abst"/>
    </div>
  </div>
</template>

<script>
import Footer from '@/components/public/FtooTer.vue'
import Revise from '@/views/commodity/components/Type-revise.vue'
import { task, deletes } from '@/api/commodity/Type'

export default {
  components: {
    Footer,
    Revise
  },
  data () {
    return {
      number: '', // 总条数
      input: '',
      options: [],
      value: '',
      revise: false,
      tableData: [],
      region: {
        pageIndex: 1,
        pageSize: 10,
        className: ''
      },
      change: {
        show: '',
        className: '',
        classId: '',
        rand: ''
      }
    }
  },
  async created () {
    this.Data()
  },
  methods: {
    // 新增
    async addFn () {
      this.revise = true
      this.change.show = false
    },
    // 修改
    async rev (index, rows) {
      if (this.change.classId === rows[index].classId) {
        this.change.rand = Math.random()
      }
      this.change.className = rows[index].className
      this.change.classId = rows[index].classId
      this.revise = true
      this.change.show = true
    },
    // 接口渲染页面
    async Data () {
      const res = await task(this.region)
      this.tableData = res.currentPageRecords // 对获取的数据添加序号属性
      this.tableData.forEach((item, index) => {
        // 添加序号
        this.$set(item, 'index', index + 1 + (this.region.pageIndex - 1) * 10)
      })
      // 总页数
      this.number = res.totalCount
    },
    // 搜索
    search () {
      this.Data()
    },
    // 删除
    async deleteRow (index, rows) {
      const res = await deletes(rows[index].classId)
      console.log(res)
      this.Data()
    },
    // 下一页
    next () {
      this.region.pageIndex++
      // 页数
      this.Data()
    },
    // 上一页
    up () {
      this.region.pageIndex--
      // 页数
      this.Data()
    },
    // 新增&查看
    abst () {
      this.Data()
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  width: 100%;
  background-color: #fff;
  height: 9.5%;
  margin-bottom: 1.2%;
  display: flex;
  line-height: 64px;
  .serve {
    display: flex;
    .name {
      width: 35%;
      font-size: 14px;
    }
  }
}
.main {
  height: 90%;
  width: 100%;
  background-color: #fff;

  .top-btn {
    display: flex;
    width: 100%;
    height: 7%;
    margin-left: 10px;
    margin-bottom: 16px;
    // background-color: red;
  }
  .count {
    height: 95%;
  }
}
</style>
